<template>
  <el-dialog :model-value="open" :class="styles['dialog']">
    <h3 class="ato-sub-title">合并发货销售订单UID：</h3>
    <ul :class="styles['send-sell-uid']">
      <li v-for="uid in cardIds" :key="uid">{{ uid }}</li>
    </ul>
    <h3 class="ato-sub-title">请填写发货物流信息：</h3>
    <el-form :class="styles['form']" ref="formRef" :model="form" :rules="rules" label-width="130px">
      <el-form-item label="发货物流公司:" prop="logisticsCompany">
        <el-input v-model="form.logisticsCompany" autocomplete="off" style="width: 220px;"/>
      </el-form-item>
      <el-form-item label="发货物流单号:" prop="trackingNo">
        <el-input v-model="form.trackingNo" autocomplete="off" style="width: 220px;" ref="inputRef"/>
        <i :class="styles['scanner-icon']" @click="handleScanner" />
      </el-form-item>
    </el-form>
    <template #header>
       <h2 :class="styles['title']">填写订单发货物流信息</h2>
    </template>
    <template #footer>
      <div class="ato-flex-jc-center">
        <el-button type="primary" @click="confirm" size="large" style="width: 200px">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="OrderLogisticsDialog">
import {computed, reactive, ref} from 'vue'
import { ElMessage } from 'element-plus'
import { CameraFilled } from '@element-plus/icons-vue'
import {addSendOrderApi} from '@/service/outStore'

const props = defineProps({
  open: Boolean,
  close: Function,
  cardIds: Array
})

const emit = defineEmits(['close', 'confirm'])

const inputRef = ref(null)
// 表单ref
const formRef = ref(null)
// 表单
const form = reactive({
  logisticsCompany: '',
  trackingNo: ''
})
// 检验
const rules = {
  logisticsCompany: [{ required: true, message: '请选择发货物流公司', trigger: 'blur' }],
  trackingNo: [{ required: true, message: '请填写发货物流单号', trigger: 'blur' }]
}

// 扫描抢
function handleScanner () {
  inputRef.value.focus()
}

// 提交
function confirm () {
  formRef.value.validate(async valid => {
    if(valid) {
      const res = await addSendOrderApi({
        cardId: props.cardIds,
        trackingNo: form.trackingNo,
        logisticsCompany: form.logisticsCompany
      })
      if (res.code === __code) {
        ElMessage.success('发货物流信息提交成功！\n整个订单象取可到【全部已发货订单列表】-点击查看')
        emit('confirm')
      }
    }else {
      console.log('error submit!!')
      return false
    }
  })

}
</script>

<style lang="less" src="./index.less" module="styles">

</style>
